<template>
<div class="login-box">
    <div class="panel panel-default">
        <p class="panel-heading no-collapse">用户登录</p>
        <div class="panel-body">
            <form>
                <div class="form-group">
                    <label>登录名</label>
                    <input v-model="username" type="text" autofocus class="form-control span12">
                </div>
                <div class="form-group">
                <label>密码</label>
                    <input v-model="password" @keyup.enter="login" type="password" class="form-control span12 form-control">
                </div>
                
                <a class="btn btn-success pull-right" @keyup.enter="login" @click="login">登录</a>
                <label class="remember-me"><input type="checkbox"> 记住密码</label>
                <div class="clearfix"></div>
            </form>
        </div>
        <div><span>此系统为新系统，如有bug请先用<a href="http://192.168.1.66:88">旧系统</a></span></div>
    </div>
    <div class="footer">
            <ul>
                <li>
                    <label>系统操作文档</label>
                    <a v-for="list in lists" @click="goTo(list.subDirname)">{{list.subDirname}}</a>
                </li>
                <li>
                    <label>其他系统入口</label>
                    <a href="http://192.168.2.56:8088" target="_blank">数据分析平台</a>
                </li>
            </ul>
    </div>
</div>
</template>
<script>
    import myHeader from './Header'
    export default {
        data() {
            return {
                username: '',
                password: '',
                lists: []
            }
        },
        methods: {
            login: function() {

                var _this = this
                $.ajax({
                    url: 'http://192.168.1.66:808/api/user/login',
                    dataType: 'json',
                    type: 'POST',
                    data: {
                        loginname: _this.username,
                        password: _this.password,
                        teamid: localStorage.activeteamid,
                    },
                    crossDomain: true,
                    success: function(response) {
                        if (response.Table1[0].status == true) {
                            localStorage.token = response.Table2[0].ftoken
                            localStorage.userid = response.Table2[0].fidno
                            localStorage.username = response.Table2[0].username
                            localStorage.activeteamid = response.Table2[0].fteamid
                            if(!localStorage.theme){
                                localStorage.theme = 'theme-blue'
                            }
                            _this.$router.replace('/wrapper')
                            for (var i = 0; i < response.Table3.length; i++) {
                                if (localStorage.activeteamid == response.Table3[i].fteamid) {
                                    localStorage.activeteamname = response.Table3[i].ftitle
                                }
                            }

                        } else {
                        _this.$store.commit('showModal',response.Table1[0].message)
                        }
                    },
                    error: function(response) {
                        _this.$store.commit('showModal',response)
                    }
                })
            },
            getMenu() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/nav/get',
                    data: {},
                    dataType: 'json',
                    async: false,
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        _this.lists = retdata.data
                    }
                });
            },
            goTo(url) {
                url = '/document/' + url
                this.$router.push(url)
            }
        },
        mounted() {
            
            this.getMenu()
        }
    }
</script>
<style>
    #line-chart {
        height: 300px;
        width: 800px;
        margin: 0px auto;
        margin-top: 1em;
    }
    
    .navbar-default .navbar-brand,
    .navbar-default .navbar-brand:hover {
        color: #fff;
    }
    
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 20px 100px;
        ;
        background-color: #2e4053;
        color: #fff
    }
    
    .footer ul {
        text-align: left;
        list-style: none;
        float: left;
    }
    .footer ul li{
        float: left;
    }
    .footer ul li a {
        display: block
    }
</style>